<template>
  <div class="questions">
  <div class="scores pt-2">
    <div class="totalscore  d-flex jc-center mb-2">
      <span>得分:</span>
      <span>{{answer.score}}</span>
    </div>
    <div class="d-flex jc-around">
      <div class="totalscore d-flex fl-col ai-center">
      <span>单选得分</span>
      <span>{{answer.singleScore}}</span>
    </div>
    <div class="totalscore d-flex fl-col ai-center">
      <span>多选得分</span>
      <span>{{answer.multipleScore}}</span>
    </div>
    <div class="totalscore d-flex fl-col ai-center">
      <span>判断得分</span>
      <span>{{answer.judgeScore}}</span>
    </div>
    <div class="totalscore d-flex fl-col ai-center">
      <span>填空得分</span>
      <span>{{answer.fillScore}}</span>
    </div>
    <div class="totalscore d-flex fl-col ai-center">
      <span>论述得分</span>
      <span>{{answer.discussScore}}</span>
    </div>
    </div>
  </div>
   <div class="ques-content p-3" >
      
  <div class="ques-item " >
 <div class="single mb-3" v-for="(item,i) in answer.single" :key="i">
    <div class="ques-list p-3 ">
   <div class="d-flex jc-between">
      <div class="label">单选题</div>
    <div class="sort"> <span class="current fs-18">{{i + 1}}</span>/ <span class="total">{{answer.totalTitle}}</span></div>
   </div>
   <div class="d-flex mt-3">
     <div class="title mx-3">{{item.title}} </div>
   <span class="score">( {{item.score}}分 )</span>
   </div>
   <div class="options p-3" v-for="(option ,index) in item.singleOption" :key="index">
    <input type="radio" :name="`${item._id}`" :value="`${option._id}`" :id="`${option._id}`" v-model="item.pick" > <label :for="`${option._id}`" >{{option.answer}}</label>
   </div>
  </div>
 </div>
  </div>

    <div class="ques-item " >
 <div class="multiple mb-3" v-for="(item,i) in answer.multiple" :key="i">
    <div class="ques-list p-3 ">
   <div class="d-flex jc-between">
      <div class="label">多选题</div>
    <div class="sort"> <span class="current fs-18">{{i + singLength + 1}}</span>/ <span class="total">{{answer.totalTitle}}</span></div>
   </div>
   <div class="d-flex mt-3">
     <div class="title mx-3">{{item.title}} </div>
   <span class="score">( {{item.score}}分 )</span>
   </div>
   <div class="options p-3" v-for="(option ,index) in item.multipleOption" :key="index">
    <input type="checkbox" :name="`${item._id}`" :value="`${option._id}`" :id="`${option._id}`" v-model="item.pick" > <label :for="`${option._id}`" >{{option.answer}}</label>
   </div>
  </div>
 </div>
  </div>
  
  
    <div class="ques-item " >
 <div class="fill mb-3" v-for="(item,i) in answer.fill" :key="i">
    <div class="ques-list p-3 ">
   <div class="d-flex jc-between">
      <div class="label">填空题</div>
    <div class="sort"> <span class="current fs-18">{{i + 1 + multipleLength + singLength}}</span>/ <span class="total">{{answer.totalTitle}}</span></div>
   </div>
   <div class="d-flex mt-3 mb-5">
     <div class="title mx-3">{{item.title}} </div>
   <span class="score">( {{item.score}}分 )</span>
   </div>
    <el-input type="textarea"  v-model="item.answer" > </el-input>
  </div>
 </div>
  </div>

     <div class="ques-item " >
 <div class="judge mb-3" v-for="(item,i) in answer.judge" :key="i">
    <div class="ques-list p-3 ">
   <div class="d-flex jc-between">
      <div class="label">判断题</div>
    <div class="sort"> <span class="current fs-18">{{i + 1 + multipleLength + singLength + fillLength}}</span>/ <span class="total">{{answer.totalTitle}}</span></div>
   </div>
   <div class="d-flex mt-3 mb-2">
     <div class="title mx-3">{{item.title}} </div>
   <span class="score">( {{item.score}}分 )</span>
   </div>
   <div class="p-3">
     <div class="mb-3"> <input type="radio" :name="item._id" value="1"  v-model="item.question"><label >正确</label></div>
    <div><input type="radio" :name="item._id" value="0"  v-model="item.question"><label>错误</label></div>
    </div>
 
  </div>
 </div>
  </div>

   <div class="ques-item " >
 <div class="discuss mb-3" v-for="(item,i) in answer.discuss" :key="i">
    <div class="ques-list p-3 ">
   <div class="d-flex jc-between">
      <div class="label">论述题</div>
    <div class="sort"> <span class="current fs-18">{{i + 1 + multipleLength + singLength + fillLength + judgeLength}}</span>/ <span class="total">{{answer.totalTitle}}</span></div>
   </div>
   <div class="d-flex mt-3 mb-5">
     <div class="title mx-3">{{item.title}} </div>
   <span class="score">( {{item.score}}分 )</span>
   </div>
       <el-input type="textarea"  v-model="item.question" > </el-input>

  </div>
 </div>
  </div>
   </div>
   <div class="prev"></div>
   <div class="next"></div>
   <div class="footer"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: {
       title: '',
      icon: '',
      name: '',
      instructions:''
      },
      answer: {

      },
     singLength: '',
     fillLength: '',
     multipleLength: '',
    judgeLength: '',
    }
  },
 props: {
    id: {
      required: true
    },
  },

  methods: {

    async fetch() {
      const re = await this.$http.get(`/myquestions/${this.id}`)
     this.answer = re.data
      this.singLength = this.answer.single.length
      this.multipleLength = this.answer.multiple.length
      this.fillLength = this.answer.fill.length
      this.judgeLength = this.answer.judge.length

    },



                    
  },
  created() {
    this.fetch()
  },
}
</script>

<style>
.scores {
  height: 66px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #fff;
}
</style>